<template>
    <view class="content">
        <!-- 身份选择 -->
		<view class="model">
			<view class="identity-select">
				<view class="label">您的身份:</view>
				<u-picker :closeOnClickOverlay="true" :show="show1" :columns="userColumns" 
						@confirm="e => confirmHandler(e, 'user')" @cancel="cancelHandler" @close="cancelHandler"></u-picker>
				<text v-if="selectedUser" @click="show1 = true" class="select-label">{{ selectedUser }}</text>
				<u-button v-else class="select-button" @click="show1 = true">选择</u-button>
			</view>
		</view>
		<!-- 分类选择 -->
		<view class="model" v-if="selectedUser">
			<view class="identity-select">
				<view class="label">选择类别:</view>
				<u-picker :closeOnClickOverlay="true" :show="show2" :columns="CategoryColumns" 
						@confirm="e => confirmHandler(e, 'category')" @cancel="cancelHandler" @close="cancelHandler"></u-picker>
				<text v-if="selectedCategory" @click="show2 = true" class="select-label">{{ selectedCategory }}</text>
				<u-button v-else class="select-button" @click="show2 = true">选择</u-button>
			</view>
		</view>
		<!-- 现持有证书选择 -->
		<view class="model" v-if="selectedUser && selectedCategory">
			<view class="identity-select">
				<view class="label">现持有证书:</view>
				<u-picker :closeOnClickOverlay="true" :show="show3" :columns="nowLicenseColumns" 
						@confirm="e => confirmHandler(e, 'nowLicense')" @cancel="cancelHandler" @close="cancelHandler"></u-picker>
				<text v-if="selectedNowLicense" @click="show3 = true" class="select-label">{{ selectedNowLicense }}</text>
				<u-button v-else class="select-button" @click="show3 = true">选择</u-button>
			</view>
		</view>
		<!-- 拟申请证书选择 -->
		<view class="model" v-if="selectedUser && selectedCategory && selectedNowLicense">
			<view class="identity-select">
				<view class="label">拟申请证书:</view>
				<u-picker :closeOnClickOverlay="true" :show="show4" :columns="getLicenseColumns" 
						@confirm="e => confirmHandler(e, 'getLicense')" @cancel="cancelHandler" @close="cancelHandler"></u-picker>
				<text v-if="selectedGetLicense" @click="show4 = true" class="select-label">{{ selectedGetLicense }}</text>
				<u-button v-else class="select-button" @click="show4 = true">选择</u-button>
			</view>
		</view>
		<button v-if="selectedUser && selectedCategory && selectedNowLicense && selectedGetLicense" class="btn" @click="findResult">一键查询</button>
        <!-- 查询结果表格 -->
        <view class="scroll-hint" v-if="showResult">
            <text>左右滑动查看更多</text>
            <text class="arrow">→</text>
        </view>
        <scroll-view class="table-container" scroll-x v-if="showResult">
            <view class="table">
                <view class="table-header">
                    <view class="th">培训（考试）前资历要求</view>
                    <view class="th">岗位适任培训要求</view>
                    <view class="th">适任考试要求</view>
                    <view class="th">考试后资历要求</view>
                </view>
                <view class="table-body">
                    <view class="tr" v-for="(item, index) in requireColumns" :key="index">
                        <view class="td">{{item.first}}</view>
                        <view class="td">{{item.second}}</view>
                        <view class="td">{{item.third}}</view>
                        <view class="td">{{item.fourth}}</view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { data } from '../../utils/data.js';
export default {
    data() {
        return {
            userList: [],
            categoryList: [],
            nowLicense: [],
            getLicense: [],
            requireList: [],
            show1: false,
			show2: false,
			show3: false,
			show4: false,
            showResult: false,
            userColumns: [],
			CategoryColumns: [],
            nowLicenseColumns: [],
            getLicenseColumns: [],
            requireColumns: [],
			selectedUser: '',
            userId: '',
			selectedCategory: '',
            categoryId: '',
			selectedNowLicense: '',
            nowLicenseId: '',
			selectedGetLicense: '',
            getLicenseId: '',
        }
    },
    watch: {
        selectedUser: {
            handler(newVal) {
                this.selectedCategory = '';
                this.selectedNowLicense = '';
                this.selectedGetLicense = '';
                this.showResult = false;
            },
        },
        selectedCategory: {
            handler(newVal) {
                this.selectedNowLicense = '';
                this.selectedGetLicense = '';
                this.showResult = false;
            },
        },
        selectedNowLicense: {
            handler(newVal) {
                this.selectedGetLicense = '';
                this.showResult = false;
            },
        },
        selectedGetLicense: {
            handler(newVal) {
                this.showResult = false;
            },
        }
    },
    
    onLoad() {
        this.getData();
    },
    methods: {
        getData() {
            this.userList = data.userList;
            this.categoryList = data.categoryList;
            this.nowLicense = data.nowLicense;
            this.getLicense = data.getLicense;
            const storageData = uni.getStorageSync('StorageData');
            this.requireList = storageData.requireList;
            this.getuserColumns();
        },
		// 用户选择
        getuserColumns() {
            // 遍历userList，把里面的id去掉，数组只存储name的数据
            let userColumns = this.userList.map(item => item.name);
            this.userColumns = [userColumns];
        },
		// 分类选择
        getcategoryColumns(userIndex) {
            let categoryColumns = this.categoryList
                .filter(item => item.uuidList.includes(userIndex.toString()))
                .map(item => item.name);
            this.CategoryColumns = [categoryColumns];
        },
		// 现持有证书选择
        getnowLicenseColumns(userIndex,categoryIndex) {
            let uuid = userIndex.toString() + categoryIndex.toString();
            console.log(uuid);
            let nowLicenseColumns = this.nowLicense
                .filter(item => item.uuidList.includes(uuid.toString()))
                .map(item => item.name);
            this.nowLicenseColumns = [nowLicenseColumns];
        },
		// 拟申请证书选择
        getgetLicenseColumns(userIndex,categoryIndex,nowLicenseIndex) {
            let uuid = userIndex.toString() + categoryIndex.toString() + nowLicenseIndex.toString();
            console.log(uuid);
            let getLicenseColumns = this.getLicense
                .filter(item => item.uuidList.includes(uuid.toString()))
                .map(item => item.name);
            this.getLicenseColumns = [getLicenseColumns];
        },
        findResult(){
            let uuid = this.userId.toString() + this.categoryId.toString() + this.nowLicenseId.toString() + this.getLicenseId.toString();
            console.log("查询UUID:", uuid);
            // 先检查数据是否存在
            if (!this.requireList || !Array.isArray(this.requireList)) {
                console.error("requireList不存在或格式不正确");
                return;
            }
            let requireColumns = this.requireList
                .filter(item => item.uuid==uuid)
            console.log("匹配到的数据:", requireColumns);
            this.requireColumns = requireColumns;
            this.showResult = true;
        },
        confirmHandler(e, type) {
            if(type == 'user'){
				this.selectedUser = e.value[0];
                let selectedUserObj = this.userList.find(item => item.name === e.value[0]);
                this.show1 = false;
                this.userId = selectedUserObj.id;
                this.getcategoryColumns(this.userId);
            }else if(type == 'category'){
				this.selectedCategory = e.value[0];
                let selectedCategoryObj = this.categoryList.find(item => item.name === e.value[0]);
                this.show2 = false;
                this.categoryId = selectedCategoryObj.id;
                this.getnowLicenseColumns(this.userId,this.categoryId);
            }else if(type == 'nowLicense'){
				this.selectedNowLicense = e.value[0];
                let selectedNowLicenseObj = this.nowLicense.find(item => item.name === e.value[0]);
                this.show3 = false;
                this.nowLicenseId = selectedNowLicenseObj.id;
                this.getgetLicenseColumns(this.userId,this.categoryId,this.nowLicenseId);
            }else if(type == 'getLicense'){
				this.selectedGetLicense = e.value[0];
                let selectedGetLicenseObj = this.getLicense.find(item => item.name === e.value[0]);
                this.show4 = false;
                this.getLicenseId = selectedGetLicenseObj.id;
            }
        },
        cancelHandler() {
            this.show1 = false;
			this.show2 = false;
			this.show3 = false;
			this.show4 = false;
        },
    }
}
</script>

<style scoped>
/* 整体内容容器 */
.content {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}
.model {
	margin-top: 20px;
}
/* 身份选择区域 */
.identity-select {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 标签样式 */
.label {
	width:90px;
    font-size: 16px;
    color: #333333;
    font-weight: bold;
	text-align: center;
}
.select-label{
	width:230px;
    font-size: 15px;
    color: #333333;
    font-weight: bold;
	padding-left:5px;
}
/* 选择按钮样式 */
.select-button
 {
	width:65px;
	height: 35px;
    background-color: #007aff;
    color: #ffffff;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.select-button:hover {
    background-color: #0056b3;
}
.btn{
	width: 100%;
	height: 40px;
	background-color: #007aff;
    /* 文本居中 */
    text-align: center;
	color: #ffffff;
    margin-top: 20px;
	
}
.scroll-hint {
    width: 100%;
    text-align: center;
    padding: 10rpx 0;
    color: #666;
    font-size: 24rpx;
    background-color: #f8f8f8;
    margin-top: 20rpx;
    text-align: right;
}

.arrow {
    display: inline-block;
    margin-left: 10rpx;
    animation: arrowMove 1.5s infinite;
}

@keyframes arrowMove {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10rpx);
    }
    100% {
        transform: translateX(0);
    }
}

.table-container {
    margin-top: 10rpx;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    position: relative;
    background-color: #fff;
}

.table {
    border: 1px solid #ebeef5;
    width: 200%;  /* 增加表格整体宽度 */
    min-width: 1000rpx;
    position: relative;
}
.table-header {
    display: flex;
    background-color: #f5f7fa;
}
.th {
    padding: 20rpx;
    text-align: center;
    font-weight: bold;
    flex: 1;
    min-width: 250rpx; /* 增加每列最小宽度 */
    word-break: break-all; /* 允许在任意字符间断行 */
    white-space: normal; /* 允许文字换行 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #ebeef5;
}
.table-body {
    width: 100%;
}
.tr {
    display: flex;
    border-bottom: 1px solid #ebeef5;
}
.td {
    padding: 20rpx;
    text-align: center;
    flex: 1;
    min-width: 250rpx; /* 增加每列最小宽度 */
    word-break: break-all; /* 允许在任意字符间断行 */
    white-space: normal; /* 允许文字换行 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #ebeef5;
}
.meet {
    color: #67c23a;
}
.not-meet {
    color: #f56c6c;
}
</style>